/** 
 * 创建通用px相关样式
 * @param $class-name: 类名
 * @param $style-name: 样式名
 * @param $style-value: 样式值
 * @param $start: 起始值，默认1
 * @param $end: 结束值，默认50
 *
 * ex:
 * 生成 .f-s-10 { font-size: 10px; } 至 .f-s-100 { font-size: 100px; }
 * @include create-common-px-style('f-s-', 'font-size', 'px', 10, 100);
*/
@mixin create-common-px-style ($class-name, $style-name, $style-value, $start: 1, $end: 50) {
  @for $i from $start through $end {
    .#{$class-name}#{$i} {
      #{$style-name}: #{$i}px;
    }
  }
}

/** 
 * 创建通用颜色相关样式
 * @param $colors: 颜色对象组成的数组
 * @param $style-name-pre: 样式名前缀
 * @param $style-value: 样式值
 *
 * ex:
 * 生成 .f-orange { color: $orange; } .f-white { color: $white; } ...
 * @include create-common-color-style($colors, 'f-', 'color');
*/
@mixin create-common-color-style ($colors, $style-name-pre, $style-value) {
  @each $color-name, $color-value in $colors {
    .#{$style-name-pre}#{$color-name} {
      #{$style-value}: $color-value;
    }
  }
}